<template>
  <component :is="currentComponentName" ref="dvInstance"></component>
</template>
<script>
import {computed, defineComponent, ref, toRefs} from "vue";
import dvChartCapsule from '@/components/chart/components/dv-chart-capsule'
import dvChartScrollTable from '@/components/chart/components/dv-chart-scroll-table'
import dvChartDigitalFlop from '@/components/chart/components/dv-chart-digital-flop'
import dvChartWaterLevelPond from '@/components/chart/components/dv-chart-water-level-pond'

export default defineComponent({
  name: 'dv-chart',
  components: {
    dvChartCapsule, dvChartScrollTable, dvChartDigitalFlop, dvChartWaterLevelPond
  },
  props: {
    workBook: {type: Object}
  },
  setup(props) {
    const {workBook} = toRefs(props)
    const dvInstance = ref(null)
    /**
     * 图表实现方法
     * @param data 数据
     * @param columnFields 列字段
     * @param rowFields 行字段
     * @param chartMode 图表类型
     * @param options 配置项
     */
    const build = (data, columnFields, rowFields, chartMode, options) => {
      return new Promise((resolve, reject) => {
        const chart = dvInstance.value.build(data, columnFields, rowFields, chartMode, options)
        resolve(chart)
      })
    }

    const currentComponentName = computed(() => {
      if (workBook.value.chartMode === 6) {
        return 'dvChartScrollTable'
      } else if (workBook.value.chartMode === 18) {
        return 'dvChartDigitalFlop'
      } else if (workBook.value.chartMode === 22) {
        return 'dvChartWaterLevelPond'
      } else {
        return 'dvChartCapsule'
      }
    })
    return {
      currentComponentName,
      dvInstance,
      build
    }
  }
})
</script>
